<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html style="height:100%;min-height: 580px;"><head>
  <title>荩美国际商城</title>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link href="/resources/frontcss/cart.css" rel="stylesheet">
  <link rel="stylesheet" href="/resources/frontcss/magic-check.css" type="text/css"/>
  <script src="/resources/js/jquery-1.8.1.min.js" type="text/javascript"></script>
</head>
<body style="background-color: #fff;overflow-x:hidden;">
<div class="buzhou">1.分享朋友圈→<span style="color: #bf2071">2.填写物流信息→</span>3.生成专属二维码</div>
<div class="cart-title">
  <%--<p style="color:  #bf2071;"> 团购请拨打4008013458&nbsp;（8:00 - 17:00）</p>--%>
  <h3>在线下单</h3>
</div>

  <div class="taocan clearfix">
    <c:choose>
      <c:when test="${data!=null && data.size()>0}">
        <c:forEach items="${data}" var="e">
          <ul  style="opacity: 1; height: 77px; padding: 2% 2% 2% 3.5%; margin-top: 3%;">

            <c:set var="images" value="${fn:split(e.images,'|')}"/>
            <c:forEach items="${images}" var="d" varStatus="i">
              <c:if test="${i.index==0}">
                <li class="good-left"><img src="${d}" style="width: 100%;height: 70px;"></li>
              </c:if>
            </c:forEach>

            <li class="good-center">
              <h1 class="fl">${e.name}</h1>
              <p class="fl price">单价:<span id="price_${e.id}">${e.price}</span>元</p>
              <input type="hidden" name="id" value="${e.id}"/>
              <input type="hidden" name="price" value="${e.price}" data="${e.id}"/>
              <input type="hidden" name="num" id="id_${e.id}" value="1"/>
            </li>
            <li class="good-right"><img class="goods_delete" src="/resources/images/good-close.svg">
              <div class="fr num-bor clearfix">
                <div class="jian-zhezhao" onclick="dec('${e.id}')"></div>
                <div class="jian fl" id="dec_${e.id}" >-</div>
                <input class="fl val control_input" type="text" value="1" id="num_${e.id}">
                <div  id="add_${e.id}" onclick="add('${e.id}')" class="jia fl">+</div></div>
            </li>
          </ul>
        </c:forEach>
      </c:when>
    </c:choose>

  </div>

  <div class="price-total" style="margin: 0px 0px;">
    <ul>
      <li style="width:35%;">
        <h1>邮费:<span id="postAmount">0</span>元</h1>
      </li>
    </ul>
  </div>

  <div class="price-total" style="margin: 0px 0px;">
    <ul>
      <li style="width:35%;">
        <h1>合计:<span id="totalMoney">0.00</span>元</h1>
      </li>
    </ul>
  </div>

  <div class="price-total" style="margin: 0px 0px;">
    <ul>
      <li style="width:60%;">
        <h1>

        <input type="checkbox" name="isUse"  class="magic-radio" id="isUse" style="padding-top: 3px;"  checked onclick="changePrice()"/>
        <label for="isUse">可使用余额：<span id="bonus">${money}</span>元</label>

        </h1>
      </li>
    </ul>
  </div>


  <textarea class="remark" maxlength="50" name="remark" id="remark" placeholder="点击填写备注信息(50字以内)"></textarea>
  <div class="reminder">
    <p>重要提示：</p>
    <p style="font-size: 12px;">
      支付<strong>点击</strong>完成，请勿关闭页面,等待生成您的个人专属二维码。分享给好友，好友扫码购买后可逐级获得奖励，可从个人中心提现，审核通过后到账！</p>
  </div>
  <div class="takeinfo" style="">
    <label><p>收货人名称（必填）</p>
      <input type="text" name="userName" id="userName" class="info-response-width" value="${userAddress.userName}">
    </label><br>
    <label><p>手机号码（必填）</p>
      <input type="text" name="telephone" id="telephone" class="info-response-width" value="${userAddress.telephone}">
    </label><br>
    <p>所在地区（必填）</p>
    <div class="info">
      <div>
        <select id="province" name="province"  onchange="loadCity()">
        </select>
        <select id="city" name="city"  onchange="loadArea()">
          <option value="0">请选择</option></select>
        <select id="area" name="area">
          <option value="">请选择</option>
        </select>
      </div>
    </div>
    <label><p>详细地址（必填）</p>
      <input name="address" id="address" class="info-response-width" value="${userAddress.address}">
    </label><br>
    <h1 class="reminder1" style="font-size:12px; display: none; color: #bf2072;width:100%;margin: 0 auto;">温馨提示：</h1>
    <p class="reminder1" style="font-size:10px;color: #333;display: none;width:100%;margin: 0 auto;">

    </p>
  </div>
  <form id="orderForm" action="/front/order/save" method="post">
    <input type="hidden" name="ids" id="ids"/>
    <input type="hidden" name="hidden_remark" id="hidden_remark"/>
    <input type="hidden" name="hidden_userName" id="hidden_userName" value="${userAddress.userName}"/>
    <input type="hidden" name="hidden_telephone" id="hidden_telephone" value="${userAddress.telephone}"/>
    <input type="hidden" name="hidden_address" id="hidden_address" value="${userAddress.telephone}"/>
    <input type="hidden" name="hidden_province" id="hidden_province" value="${userAddress.province}"/>
    <input type="hidden" name="hidden_city" id="hidden_city" value="${userAddress.city}"/>
    <input type="hidden" name="hidden_area" id="hidden_area" value="${userAddress.area}"/>
    <input type="hidden" name="hidden_province_name" id="hidden_province_name" value="${userAddress.provinceName}"/>
    <input type="hidden" name="hidden_city_name" id="hidden_city_name" value="${userAddress.cityName}"/>
    <input type="hidden" name="hidden_area_name" id="hidden_area_name" value="${userAddress.areaName}"/>
    <input type="hidden" name="bonus_amount" id="bonus_amount" />
    <input type="hidden" name="post_amount" id="post_amount" />
  </form>
  <div class="takeinfo1" style="display: none;">
    <ul>
      <li>
        <img class="position" src="/resources/images/position.svg">
      </li>
      <li>
        <h1 class="fl">收货人：${userAddress.userName}(${userAddress.telephone})
        </h1>
        <p class="fl">收货地址：${userAddress.provinceName}/${userAddress.cityName}/${userAddress.areaName} ${userAddress.address}</p>
      </li>
      <li>
        <img class="edit" src="/resources/images/edit.svg" onclick="editAddress()">
      </li>
    </ul>
    <h1 class="reminder1" style="font-size:12px; display: none; color: #bf2072;width: 81%;margin: 0 auto;">温馨提示：</h1>
    <p class="reminder1" style="font-size:10px; display: none;width: 81%;margin: 0 auto;"></p>
  </div>
  <div class="cart-bottom">
    <h1>待支付:￥<span id="total">0.00</span></h1>
    <button id="order_add_submit" onclick="submitOrder()">提交订单</button>
  </div>

<script type="text/javascript">
  function buy(id){
    window.location.href = "/front/cartList?r="+Math.random();
  }
  function dec(id){
    var num = parseInt($("#num_"+id).val());
    if(num>1){
      num --;
    }else{
      num = 1;
    }
    $("#num_"+id).val(num);
    $("#id_"+id).val(num);
    changePrice();
  }

  function add(id){
    var num = parseInt($("#num_"+id).val());
    if(num<1){
      num = 1;
    }
    num ++;
    $("#num_"+id).val(num);
    $("#id_"+id).val(num);
    changePrice();
  }

  function accMul(arg1,arg2){
    var m=0,s1=arg1.toString(),
            s2=arg2.toString();
    try{
      m+=s1.split(".")[1].length}catch(e){}
    try{
      m+=s2.split(".")[1].length}catch(e){}
      return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m
    )
  }


  function changePrice(){
    var totalMoney = parseInt($("#postAmount").html());
    $("input[name='price']").each(function(){
      var id = $(this).attr("data");
      var price = parseFloat($(this).val());
      var num = parseInt($("#num_"+id).val());
      totalMoney += accMul(price,num);
    });
     var chk = $("#isUse").attr("checked");
    if(chk == "checked"){
      var bonus = $("#bonus").html();
      var m = parseFloat(totalMoney) - parseFloat(bonus);
      $("#bonus_amount").val("1");
      if(m>0){//总金额大于购物币
        $("#total").html(m.toFixed(2));
      }else{//订单总金额小于购物币
        $("#total").html("0");
      }
    }else{
      $("#bonus_amount").val("0");
      $("#total").html(totalMoney);
    }
    $("#totalMoney").html(totalMoney);
  }
  function submitOrder(){
    var ids = "";
    $("input[name='id']").each(function () {
      var id = $(this).val();
      var num = $("#num_"+id).val();
      ids += id+"-"+num+",";
    });
    if(ids.length>0)
      ids = ids.substr(0,ids.length-1);
    var userName = $("#userName").val();
    if(userName==""){
      alert("请输入收货人！");
      return ;
    }
    $("#hidden_userName").val(userName);
    var telephone = $("#telephone").val();
    if(telephone==""){
      alert("请输入联系电话！");
      return ;
    }
    $("#hidden_telephone").val($("#telephone").val());
    var address = $("#telephone").val();
    if(address==""){
      alert("请输入收货地址");
      return ;
    }
    $("#hidden_address").val($("#address").val());
    $("#hidden_remark").val($("#remark").val());
    $("#hidden_province").val($("#province").val());
    $("#hidden_province_name").val($("#province").find("option:selected").text());
    $("#hidden_city").val($("#city").val());
    $("#hidden_city_name").val($("#city").find("option:selected").text());
    $("#hidden_area").val($("#area").val());
    $("#hidden_area_name").val($("#area").find("option:selected").text());
    $("#post_amount").val($("#postAmount").html());
    if(ids.length>0){
      $("#ids").val(ids);
      if(confirm("确定支付吗？"))
        $("#orderForm").submit();
    }else{
      alert("请选择产品");
    }
  }

  /**
   * 根据省份显示邮费
   */
  function showPostAmount(){
    var province = $("#province").val();
    if($("#takeinfo").is(":hidden")){
      province = $("#hidden_province").val();
    }
      if(province!=""){
          var amount = 0;
          switch (province){
            case "650000":amount = 10;break;
            case "630000":amount = 10;break;
            case "540000":amount = 10;break;
            case "150000":amount = 10;break;
            case "620000":amount = 10;break;
            case "640000":amount = 10;break;
            case "632500":amount = 10;break;
            default:
              amount = 0;
          }
        $("#postAmount").html(amount);
        changePrice();
    }
  }

  $(function(){
    var province = $("#hidden_province").val();
    if(province!=""){
      $('.takeinfo1').show();
      $('.takeinfo').hide();
    }
    //changePrice();
    showPostAmount();
    loadProvince();

    //点击删除商品
    $('.taocan').on('touchstart', '.goods_delete', function () {
      var goods_ul = $(this).parents('ul');
      var good_delete = confirm('确认删除吗？');
      var that = this;
      if (good_delete == true) {
        goods_ul.remove();
        changePrice();
      }else {
        return false;
      }
    });
  })

  function editAddress(){
    $('.takeinfo1').hide();
    $('.takeinfo').show();
  }

  function loadProvince(){
    $.ajax({
      url:"/front/loadCitys?r="+Math.random(),
      type:"post",
      data:{
        pid:"0"
      },
      success:function(res){
        if(res.success){
          fillSelect("province",res.data,$("#hidden_province").val());
          loadCity();
        }
      },
      error:function(){

      }
    })
  }
  function loadCity(){
    showPostAmount();
    $.ajax({
      url:"/front/loadCitys?r="+Math.random(),
      type:"post",
      data:{
        pid:$("#province").val()
      },
      success:function(res){
        if(res.success){
          fillSelect("city",res.data,$("#hidden_city").val());
          loadArea();
        }
      },
      error:function(){

      }
    });
  }
  function loadArea(){
    $.ajax({
      url:"/front/loadCitys?r="+Math.random(),
      type:"post",
      data:{
        pid:$("#city").val()
      },
      success:function(res){
        if(res.success){
          fillSelect("area",res.data,$("#hidden_area").val());
        }
      },
      error:function(){

      }
    });
  }
  function fillSelect(id,data,no){
    var html = "";
    $.each(data,function(i,n){
      var ckd = "";
      if(n.no == no){
        ckd = "selected";
      }
      html += "<option value='"+n.no+"' "+ckd+">"+n.name+"</option>";
    });
    $("#"+id).html(html);
  }
</script>

</body>
</html>